<template>
  <div class="app-contailer">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="优惠券类别">
            <el-select
              v-model="form.couponCategory"
              placeholder="请选择优惠券类别"
              clearable
            >
              <template v-for="dict in dict.type.coupon_type">
                <el-option
                  :label="dict.label"
                  :value="dict.value"
                  :key="dict.value"
                ></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优惠券名称" prop="couponName">
            <el-input
              v-model="form.couponName"
              placeholder="请输入优惠券名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.couponCategory == 1">
          <el-form-item label="满减要求" prop="conditionMoney">
            <el-input
              v-model="form.conditionMoney"
              placeholder="请输入满减要求"
            />
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          v-if="form.couponCategory == 1 || form.couponCategory == 3"
        >
          <el-form-item label="优惠金额" prop="preferentialMoney">
            <el-input
              v-model="form.preferentialMoney"
              placeholder="请输入优惠金额"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.couponCategory == 2">
          <el-form-item label="折扣" prop="discount">
            <el-input v-model="form.discount" placeholder="请输入折扣(1-10)" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="过期天数" prop="expiredDay">
            <el-input v-model="form.expiredDay" placeholder="请输入过期天数" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发布数量" prop="releaseNum">
            <el-input v-model="form.releaseNum" placeholder="请输入发布数量" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: end">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { addCouponManage } from '@/api/marketingManagement/couponManage'
import {
  getCarBrandList,
  getCarModelList,
  getCarSeriesList,
} from '@/api/car/model'
import { tenantBusiness } from '@/api/car/business'

export default {
  dicts: ['coupon_type', 'sys_available'],
  data() {
    return {
      tenantBusiness: [],
      // 车品牌列表
      brandList: [],
      // 车系列表
      seriesList: [],
      // 车型列表
      modelList: [],
      // 表单参数
      form: {
        couponCategory: null,
        couponId: null,
        couponName: null,
        conditionMoney: null,
        preferentialMoney: null,
        discount: null,
        expiredDay: null,
        releaseNum: null,
        upperLimit: null,
        specifyModel: 1,
        modelId: null,
        modelName: null,
        receiveMethod: 1,
        bizType: 1,
        supplementExplain: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        tenantId: null,
        isAvailable: 1,
      },
      url: null,
      // 表单校验
      rules: {
        couponCategory: [{ required: true, message: '请选择创建类型！' }],
        couponName: [{ required: true, message: '优惠券名称不能为空！' }],
        conditionMoney: [
          { required: true, message: '满减要求不能为空！', trigger: 'change' },
          {
            pattern: /^(([1-9][0-9]*)|(([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2})))$/,
            message: '满减要求输入有误',
            trigger: 'blur',
          },
        ],
        preferentialMoney: [
          {
            required: true,
            message: '优惠券金额不能为空！',
            trigger: 'change',
          },
          {
            pattern: /^(([1-9][0-9]*)|(([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2})))$/,
            message: '优惠券金额输入有误',
            trigger: 'blur',
          },
        ],
        discount: [
          { required: true, message: '折扣范围不能为空！', trigger: 'change' },
          {
            pattern: /^(10|[1-9]|([1-9]\.\d{0,2}))$/,
            message: '折扣范围输入有误',
            trigger: 'blur',
          },
        ],
        expiredDay: [
          { required: true, message: '过期天数不能为空！', trigger: 'change' },
          {
            pattern: /^([1-9]\d*)$/,
            message: '值为正整数',
            trigger: 'blur',
          },
        ],
        releaseNum: [
          { required: true, message: '发布数量不能为空！', trigger: 'change' },
          {
            pattern: /^([1-9]\d*)$/,
            message: '值为正整数',
            trigger: 'blur',
          },
        ],
        upperLimit: [
          {
            required: true,
            message: '领取上限/人不能为空！',
            trigger: 'change',
          },
          {
            pattern: /^([1-9]\d*)$/,
            message: '值为正整数',
            trigger: 'blur',
          },
        ],
        specifyModel: [{ required: true, message: '指定车型不能为空！' }],
        modelId: [{ required: true, message: '车型名称不能为空！' }],
        receiveMethod: [
          { required: true, message: '领取方式不能为空！', type: 'array' },
        ],
        bizType: [{ required: true, message: '业务类型不能为空！' }],
        bizClassification: [{ required: true, message: '业务分类不能为空！' }],
      },
      receiveMethodOptions: ['1'],
    }
  },
  created() {
    this.carBrandList()
    this.tenantBusinessList()
  },

  methods: {
    carBrandList() {
      getCarBrandList().then((response) => {
        this.brandList = response.data
      })
    },
    // 获取车系
    getSeriesList(brandId) {
      this.form.seriesId = ''
      this.form.modelId = ''
      this.seriesList = []
      this.modelList = []
      getCarSeriesList(brandId).then((response) => {
        this.seriesList = response.data
      })
      this.brandList.forEach((data, index) => {
        if (this.form.brandId == data.brandId) {
          this.form.brandName = data.brandName
          this.form.brandName = data.brandName
        }
      })
    },
    // 获取车型
    getModelList(seriesId) {
      this.form.modelId = ''
      this.modelList = []
      getCarModelList(seriesId).then((response) => {
        this.modelList = response.data
      })
      this.seriesList.forEach((data, index) => {
        if (this.form.seriesId == data.seriesId) {
          this.form.seriesName = data.seriesName
        }
      })
    },
    // 选中车型
    changeModel(modelId) {
      this.modelList.forEach((data, index) => {
        if (this.form.modelId == data.id) {
          this.form.modelName = data.modelName
        }
      })
    },
    tenantBusinessList() {
      tenantBusiness().then((response) => {
        this.tenantBusiness = response.data
      })
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.receiveMethod = this.receiveMethodOptions.join(',')
          this.form.remainingNumber = this.form.releaseNum
          addCouponManage(this.form)
            .then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.cancel(true)
            })
            .catch(() => {
              this.receiveMethodOptions = this.form.receiveMethod.split(',')
            })
        }
      })
    },
    cancel(refresh) {
      this.form = {
        couponCategory: null,
        couponId: null,
        couponName: null,
        conditionMoney: null,
        preferentialMoney: null,
        discount: null,
        expiredDay: null,
        releaseNum: null,
        upperLimit: null,
        specifyModel: 1,
        modelId: null,
        modelName: null,
        receiveMethod: 1,
        bizType: 1,
        supplementExplain: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        tenantId: null,
        isAvailable: 1,
      }
      this.resetForm('form')
      this.$emit('close', refresh)
    },
  },
}
</script>
